<ion-content>
  <div class="c-p-logo">
    <img src="assets/modify/logo@3x.png" alt="" (click)="pop()">
    <span>随心测</span>
  </div>

  <div class="login-or-register-pic">
    <div class="login-or-register-pic-bg">
      <img src="{{photoReturnUrl}}" alt="">
    </div>
    <camera [pictures]="pictures" [picturesFullPath]="picturesFullPath" (picked)="pickPictures($event)" (deleted)="deletedPictures($event)"
    ></camera>
  </div>

  <div class="c-p-box">
    <ion-list no-lines>
      <div>
        <ion-item>
          <ion-label floating>昵称</ion-label>
          <ion-input type="text" [ngClass]="{'has-liner-gradient': isShowNicknameBorder,'no-has-liner-gradient': !isShowNicknameBorder}"
            [(ngModel)]="nickname" minlength="1" maxlength="11" (keyup)=" isEmoji($event)" (blur)="blurShowNicknameBorder();"  (focus)="focusShowNicknameBorder()"></ion-input>
        </ion-item>
      </div>

      <div class="border-code">
        <ion-item>
          <ion-label floating>真实姓名</ion-label>
          <ion-input type="text" [ngClass]="{'has-liner-gradient': isShowRealnameBorder,'no-has-liner-gradient': !isShowRealnameBorder}"
            [(ngModel)]="realname" minlength="2" maxlength="10" (blur)="blurShowRealnameBorder();" (focus)="focusShowRealnameBorder()"></ion-input>
        </ion-item>
      </div>

      <div class="c-p-password">
        <ion-item>
          <ion-label floating>QQ</ion-label>
          <ion-input type="number" (keyup)='passwordReplace($event)' [ngClass]="{'has-liner-gradient':isShowQQBorder,'no-has-liner-gradient': !isShowQQBorder}"
            [(ngModel)]="qq" minlength="6" maxlength="10" (blur)="blurShowQQBorder();" (focus)="focusShowQQBorder()">
          </ion-input>
        </ion-item>
      </div>

      <div class="c-p-password">
        <ion-item>
          <ion-label floating>班级</ion-label>
          <ion-multi-picker id="default" [(ngModel)]="classes" cancelText=""  doneText="确定" [ngClass]="{'has-liner-gradient': isShowClassesBorder,'no-has-liner-gradient':!isShowClassesBorder}"
            item-content [multiPickerColumns]="dependentColumns" (blur)="blurShowClassesBorder();" (focus)="focusShowClassesBorder()"></ion-multi-picker>
        </ion-item>
      </div>
    </ion-list>
  </div>



  <div class="border-login">
    <button (click)="complete()">完成注册</button>
  </div>




</ion-content>
